<!--
 * @创建文件时间: 2021-08-14 17:37:36
 * @Auther: 猿小天
 * @最后修改人: 猿小天
 * @最后修改时间: 2021-08-14 21:27:12
 * 联系Qq:1638245306
 * @文件介绍: 图片管理
-->
<template>
  <div>
    <el-card style="height: 1000px; overflow: auto">
      <div slot="header" class="clearfix">
        <el-select v-model="value" filterable placeholder="请选择" @change="picTypeRequest">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <el-table
        :data="tableData"
        @row-click = setPicUrl
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="图片名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属存储桶">
                <span>{{ props.row.src }}</span>
              </el-form-item>
              <el-form-item label="描述">
                <span>{{ props.row.description }}</span>
              </el-form-item>
              <el-form-item label="更新时间">
                <span>{{ props.row.update_datetime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="图片 ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="图片名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="所属存储桶"
          prop="src">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_datetime">
        </el-table-column>
        <el-table-column
          label="操作"
         >
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              trigger="click">
              <el-image
                style="width: 500px; height: 500px"
                :src="picurl"
                >
              </el-image>
              <el-button slot="reference">预览</el-button>
            </el-popover>
        </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import {GetOne,GetMore} from "@/views/basicoperator/optest/api";

export default {
  name: 'pic',

  mixins: [d2CrudPlus.crud],
  data () {
    return {
      tableData: [],
      value: '',
      typeList: {},
      picurl: ''
    }
  },
  async created () {
    const res = await api.GetTypeList()
    this.typeList = res.data.data
    console.log(this.typeList)
    this.picTypeRequest(2)
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    async picTypeRequest (e) {
      const res = await api.GetList({
        typeid: e
      })
      this.tableData = res.data.data
      console.log(res)
    },
    addRequest (row) {
      console.log('api', api)
      return api.AddObj(row)
    },
    updateRequest (row) {
      console.log('----', row)
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    async setPicUrl(para){
      const res = await GetOne(para)
      console.log(res)
      this.picurl = 'http://127.0.0.1:8000/' + res.data.data.path
    },
    async getmorepic(){
      const res = await GetMore({
            data:this.tableData
      })
      console.log(res)
    }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
